<template>
      <!-- table -->
  <section class="oa-form__table">
    <h5>{{approve.name}}</h5>
    <table cellpadding="0" cellspacing="0">
      <tr v-if="$route.query.from != 'new'">
        <td>事务编号</td>
        <td>{{approve.name}}<span v-if="approve && approve.code">{{approve.code}}</span></td>
      </tr>
      <tr>
        <td>流程名称</td>
        <td>
          <span v-if="$route.query.from == 'new'">
            新建{{approve.name}}
          </span>
          <span v-else>
            {{approve.approve_name}}
          </span>
        </td>
      </tr>
      <tr>
        <td>申请事由</td>
        <td :title="reason"><el-input placeholder="申请事由" type="textarea" v-model="reason" :disabled="$route.query.from != 'new'"/></td>
      </tr>
    </table>
    <h3 class="oa-form__table-title">
      <span v-if="$route.query.from === 'new'">{{approve.name}}</span>
      <span v-else>
            {{approve.approve_name}}
      </span>
    </h3>
        <table cellpadding="0" cellspacing="0">
      <tr>
        <td class="_name">业务人员</td>
        <td>
          <el-select v-model="business" :disabled="$route.query.from != 'new'" placeholder="请选择"  @change="selectStaff($event)">
            <el-option
              v-for="item in staff"
              :key="item.value"
              :label="item.label"
              :value="item">
            </el-option>
          </el-select>
          </td>
        <td class="_name">客户信息</td>
        <td>
           <el-select v-model="formInline.region" placeholder="请选择客户信息" :disabled="this.$route.query.from !== 'new'" @change="changNub">
                  <el-option  :label="`${item.id}-${item.truename}-${item.customer}`" :value="item.id" v-for="(item, index) in passListArr" :key="index"></el-option>
                </el-select>
                <!-- <el-button type="primary" :disabled="btndisabled" @click="onSubmit">查询</el-button> -->
        </td>
        <td class="_name">合同编号</td>
        <td><el-input v-model="ContractNub" placeholder="请输入内容" :disabled="this.$route.query.from !== 'new'"></el-input></td>
      </tr>
      <tr>
           <td class="_name">上画日期</td>
        <td> <el-date-picker
      v-model="shDate"
      type="date"
      placeholder="选择日期"
       value-format="yyyy-MM-dd"
        :disabled="this.$route.query.from !== 'new'">
    </el-date-picker></td>
         <td class="_name">到期日期</td>
        <td> <el-date-picker
      v-model="dueDate"
      type="date"
      placeholder="选择日期"
       value-format="yyyy-MM-dd"
        :disabled="this.$route.query.from !== 'new'">
    </el-date-picker></td>
         <td class="_name">广告数量</td>
        <td>{{num}}</td>
        <!-- <td class="_name">申请事项</td>
        <td colspan="5">
          <el-input type="textarea" :rows="4" placeholder="请输入申请事项"  v-model="contents" :disabled="$route.query.from != 'new'" />
        </td> -->
      </tr>
      <!-- <tr>
        <td class="_name">人力资源意见</td>
        <td :title="obj.a389">
          <el-input type="textarea" :rows="3" placeholder="人力资源意见" v-model="obj.a389" disabled/>
        </td>
        <td class="_name">人力总监签字</td>
        <td :title="obj.a415">
          <el-input placeholder="行政总监签字" v-model="obj.a415"  :disabled="obj.a415Flag"/>
        </td>
        <td class="_name">日期</td>
         <td>
          <el-input v-model="obj.a418" disabled/>
        </td>
      </tr>
      <tr>
        <td class="_name">财务部意见</td>
        <td :title="obj.a390">
          <el-input type="textarea" :rows="3" placeholder="财务部意见" v-model="obj.a390" disabled/>
        </td>
        <td class="_name">财务部签字</td>
        <td>
          <el-input placeholder="财务部签字" v-model="obj.a416" :disabled="obj.a416Flag"/>
        </td>
        <td class="_name">日期</td>
        <td>
          <el-input v-model="obj.a419" disabled/>
        </td>
      </tr>
      <tr>
        <td class="_name">总经理意见</td>
        <td :title="obj.a391">
          <el-input type="textarea" :rows="3" placeholder="总经理意见" v-model="obj.a391"  disabled/>
        </td>
        <td class="_name">总经理签字</td>
        <td>
          <el-input placeholder="总经理签字" v-model="obj.a417" :disabled="obj.a417Flag"/>
        </td>
        <td class="_name">日期</td>
         <td>
          <el-input v-model="obj.a420" disabled/>
        </td>
      </tr> -->
    </table>
<!-- <div style="text-align: center;">
       <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="审批人">
    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
  </el-form-item>
  <el-form-item label="审批人">
    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
  </el-form-item>
  <el-form-item label="审批人">
    <el-input v-model="formInline.user" placeholder="审批人"></el-input>
  </el-form-item>
 <el-form-item label="编号">
                <el-select v-model="formInline.region" placeholder="编号" :disabled="this.$route.query.from !== 'new'">
                  <el-option  :label="`${item.id}-${item.truename}-${item.customer}`" :value="item.id" v-for="(item, index) in passListArr" :key="index"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" :disabled="btndisabled" @click="onSubmit">查询</el-button>
              </el-form-item>
</el-form>
</div> -->
     <div class="oa-form__table-hd">发布车辆明细</div>
    <table width="100%" border="1" cellspacing="0" cellpadding="0" style="text-align:center">
        <!-- <tr>
        <td colspan="9">
          发起时可操作
           <el-form :inline="true" :model="formInline" class="demo-form-inline" id="demo-form-inline">
              <el-form-item label="编号">
                <el-select v-model="formInline.region" placeholder="编号" :disabled="this.$route.query.from !== 'new'">
                  <el-option  :label="`${item.id}-${item.truename}-${item.customer}`" :value="item.id" v-for="(item, index) in passListArr" :key="index"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" :disabled="btndisabled" @click="onSubmit">查询</el-button>
              </el-form-item>
            </el-form>
        </td>
      </tr> -->
      <tr>
        <td class="_name">序号</td>
        <td class="_name">路线</td>
        <td class="_name">车牌号</td>
        <td class="_name">等级</td>
        <td class="_name">车型</td>
      </tr>
      <tbody v-if="importArr.length !== 0">
        <tr v-for="(item, index) in importArr" :key="index">
          <td>{{importArr.length - index}}</td>
          <td>{{item.route_name}}</td>
          <td>{{item.code}}</td>
          <td>
            <span v-if="item.rank">
              {{item.rank}}
            </span>
            <span v-else>--</span>
          </td>
          <td>
            <span v-if="item.type_name">{{item.type_name}}</span>
            <span v-else>--</span>
          </td>
        </tr>
      </tbody>
      <tr v-else>
         <td colspan="8">暂无数据</td>
      </tr>
    </table>
    <!-- <table cellpadding="0" cellspacing="0">
      <tr>
        <td class="_name">申请人</td>
        <td>
          <el-select v-model="value" :disabled="$route.query.from != 'new'" placeholder="请选择"  @change="selectStaff($event)">
            <el-option
              v-for="item in staff"
              :key="item.value"
              :label="item.label"
              :value="item">
            </el-option>
          </el-select>
          </td>
        <td class="_name">部门</td>
        <td>
          <el-select v-model="department" :disabled="$route.query.from != 'new'" placeholder="请选择">
            <el-option
              v-for="item in departments"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </td>
        <td class="_name">申请日期</td>
        <td>{{applyTime}}</td>
      </tr>
      <tr>
        <td class="_name">申请事项</td>
        <td colspan="5">
          <el-input type="textarea" :rows="4" placeholder="请输入申请事项"  v-model="contents" :disabled="$route.query.from != 'new'" />
        </td>
      </tr>
      <tr>
        <td class="_name">人力资源意见</td>
        <td :title="obj.a389">
          <el-input type="textarea" :rows="3" placeholder="人力资源意见" v-model="obj.a389" disabled/>
        </td>
        <td class="_name">人力总监签字</td>
        <td :title="obj.a415">
          <el-input placeholder="行政总监签字" v-model="obj.a415"  :disabled="obj.a415Flag"/>
        </td>
        <td class="_name">日期</td>
         <td>
          <el-input v-model="obj.a418" disabled/>
        </td>
      </tr>
      <tr>
        <td class="_name">财务部意见</td>
        <td :title="obj.a390">
          <el-input type="textarea" :rows="3" placeholder="财务部意见" v-model="obj.a390" disabled/>
        </td>
        <td class="_name">财务部签字</td>
        <td>
          <el-input placeholder="财务部签字" v-model="obj.a416" :disabled="obj.a416Flag"/>
        </td>
        <td class="_name">日期</td>
        <td>
          <el-input v-model="obj.a419" disabled/>
        </td>
      </tr>
      <tr>
        <td class="_name">总经理意见</td>
        <td :title="obj.a391">
          <el-input type="textarea" :rows="3" placeholder="总经理意见" v-model="obj.a391"  disabled/>
        </td>
        <td class="_name">总经理签字</td>
        <td>
          <el-input placeholder="总经理签字" v-model="obj.a417" :disabled="obj.a417Flag"/>
        </td>
        <td class="_name">日期</td>
         <td>
          <el-input v-model="obj.a420" disabled/>
        </td>
      </tr>
    </table> -->
    <history :process="process"></history>
    <files></files>
  </section>
</template>
<script>
import { getInfoSave, getAutoKey, info } from '@/api/oa/index.js'
import { getBookinginfo, passlist } from '@/api/bus'
import { getToDayFunc } from '@/utils/domUtils.js'
import mixin from '@/mixins/index.js'
import history from './components/process'
import files from './components/files'
const obj = {}
for (let i = 384; i <= 420; i++) {
  obj[`a${i}`] = ''
  obj[`a${i}Flag`] = true
}
export default {
  name: '',
  mixins: [mixin],
  components: { history, files },
  props: ['curDepartment', 'userInfo', 'approve', 'staff', 'departments', 'process', 'addDofield', 'opinion'],
  data () {
    return {
      customer: '',
      business: '', // 业务人员
      ContractNub: '', // 合同编号
      shDate: '', // 上画日期
      dueDate: '', // 到期日期
      checkList: [],
      importArr: [],
      num: null,
      passListArr: [],
      radio: 1,
      formInline: {
        region: null,
        user: ''
      },
      contents: '',
      reason: '',
      obj: JSON.parse(JSON.stringify(obj)),
      applyTime: getToDayFunc(),
      autoField: [],
      flag: false,
      value: '',
      department: '',
      truename: '',
      approve_id: 0,
      disabled: false,
      file_paths: [],
      file_names: [],
      field_ids: [],
      btndisabled: this.$route.query.from !== 'new',
      field_vals: []
    }
  },
  created () {

  },
  computed: {
    uploadArr () {
      return this.$store.state.uploadArr
    }
  },
  mounted () {
    this.getBookinginfo()
    this.passlist()
    if (this.$route.query.from === 'new') {
      this.disabled = true
    } else {
      this.infoFunc()
    }
  },
  watch: {
    // info: {
    //   handler (newVal) {
    //     console.log(newVal)
    //   },
    //   deep: true
    // },
    opinion () {
      // debugger
      if (!this.obj.a391Flag) {
        this.obj.a391 = this.opinion
      }
      if (!this.obj.a390Flag) {
        this.obj.a390 = this.opinion
      }
      if (!this.obj.a389Flag) {
        this.obj.a389 = this.opinion
      }
    },
    process () {
      this.processAuto()
    },
    addDofield () {
      this.addDofieldRender()
    }
  },
  destroyed () {},
  methods: {
    onSubmit () {
      this.getBookinginfo()
    },
    changNub () {
      // console.log(this.formInline.region)
      this.getBookinginfo()
      // console.log(this.passListArr)
      const res = this.passListArr.filter(item => {
        return item.id === this.formInline.region
      })
      this.customer = res[0].customer
      // console.log(res)
    },
    // 获取列表
    async passlist () {
      const { data } = await passlist()
      this.passListArr = data
      console.log(data)
    },
    // 获取列表
    async getBookinginfo (id) {
      const params = {
        id: this.formInline.region
      }
      const { data } = await getBookinginfo(params)
      this.importArr = data
      this.num = data.length
      console.log(this.passListArr)
      // const res = this.passListArr.fifilter(item => {
      //   return item.id === this.formInline.region
      // })
      // console.log(res)
    },
    getData () {
      this.addDofieldRender()
      // console.log(this.uploadArr)
      if (this.uploadArr.length > 0) {
        this.uploadArr.forEach(item => {
          this.file_paths.push(item.path)
          this.file_names.push(item.name)
        })
      }
      const params = {
        // token: window.localStorage.getItem('token'),
        openid: window.localStorage.getItem('token'),
        // contents: this.contents,
        reason: this.reason,
        department_id: this.department,
        truename: this.truename,
        apply_date: this.applyTime,
        approve_id: this.approve.id,
        import_id: this.formInline.region
      }
      const paths = new Set(this.file_paths)
      const names = new Set(this.file_names)
      params.file_paths = Array.from(paths).join()
      params.file_names = Array.from(names).join()
      console.log(this.field_ids)
      if (this.field_ids.length > 0) {
        const paths = new Set(this.field_ids)
        const names = new Set(this.field_vals)
        console.log(paths)
        console.log(names)
        params.field_ids = Array.from(paths).sort().join()
        params.field_vals = Array.from(names).join()
      }
      if (!this.reason) {
        this.$message.error('请输入申请原因')
        return false
      }
      console.log('params', params)

      //   if (!this.contents) {
      //     this.$message.error('请输入申请事项')
      //     return false
      //   }
      getInfoSave(params).then((res) => {
        const { status } = res
        if (status) {
          this.$message.error('提交成功')
          this.goFrom()
        }
      })
      this.$store.commit('getUpload', [])
    },
    addDofieldRender () {
      this.addDofield && this.addDofield.forEach(e => {
        this.judge(e)
        if (e.val) {
          this.field_ids.push(e.field_id)
          this.field_vals.push(e.val)
          this.field_vals = this.field_vals.slice(-6)
        }
        return e
      })
      console.log('add', this.addDofield)
      console.log('add', this.field_vals)
    },
    renderCustom () {
      this.autoField && this.autoField.forEach(e => {
        if (this.obj[`a${e.approve_field_id}`] !== undefined && e.approve_field_id) {
          this.$set(e, 'val', this.obj[`a${e.approve_field_id}`])
          this.obj[`a${e.approve_field_id}Flag`] = false
          if (e.val) {
            this.field_ids.push(e.approve_field_id)
            this.field_vals.push(e.val)
          }
        }
        return e
      })
      console.log(this.field_ids, this.field_vals)
    },
    infoFunc () {
      const params = {
        // token: window.localStorage.getItem('token'),
        openid: window.localStorage.getItem('token'),
        approve_id: this.approve.approve_id,
        workflow_id: this.approve.workflow_id
      }
      info(params).then(res => {
        const { status, data: { workflow, fields }, data: { node } } = res
        if (status) {
          this.getAutoKey(workflow.approve_node_id)
          this.reason = workflow.reason
          this.contents = workflow.contents
          this.value = workflow.truename
          this.department = workflow.department_id
          this.applyTime = workflow.apply_date
          this.business = fields[0].field_val
          const res = this.passListArr.filter(item => {
            return item.customer === fields[1].field_val
          })
          // console.log(res)
          // this.customer = res[0].customer
          this.formInline.region = res[0].id
          this.ContractNub = fields[2].field_val
          this.shDate = fields[3].field_val
          this.dueDate = fields[4].field_val
          this.num = fields[5].field_val
          window.localStorage.setItem('approve_node_id', workflow.approve_node_id)
          window.localStorage.setItem('is_end', workflow.is_end)
          this.getBookinginfo()
          this.infoNodeFunc(node)
        }
      })
    },
    infoNodeFunc (node) {
      node && node.forEach(e => {
        e.fields && e.fields.forEach(j => {
          if (this.obj[`a${j.field_id}`] !== undefined) {
            this.obj[`a${j.field_id}`] = j.field_val
            this.obj[`a${j.field_id}Flag`] = true
            console.log(j.field_val)
          }
          return j
        })
        return e
      })
    },
    getAutoKey (id) {
      getAutoKey(id).then(res => {
        const { status, data } = res
        if (status) {
          this.autoField = data
          if (status) {
            this.autoField && this.autoField.forEach(e => {
              this.judge(e)
              return e
            })
          }
        }
      })
    },
    judge (e) {
      if (e.field_name === '业务人员') {
        this.$set(e, 'val', this.truename)
      }
      // console.log(this.addDofield)
      if (e.field_name === '客户名称') {
        this.$set(e, 'val', this.customer)
      }
      if (e.field_name === '合同编号') {
        this.$set(e, 'val', this.ContractNub)
      }
      if (e.field_name === '上画日期') {
        this.$set(e, 'val', this.shDate)
      }
      if (e.field_name === '到期时间') {
        this.$set(e, 'val', this.dueDate)
      }
      if (e.field_name === '广告数量') {
        this.$set(e, 'val', this.importArr.length)
      }
      // if (this.obj[`a${e.approve_field_id}`] !== undefined && e.approve_field_id) {
      //   this.$set(e, 'val', this.obj[`a${e.approve_field_id}`])
      //   this.obj[`a${e.approve_field_id}Flag`] = false
      // }
      // if (!this.obj[`a${e.field_id}`] && e.field_id) {
      //   this.obj[`a${e.field_id}`] = e.options
      // }
      // if (this.obj[`a${e.field_id}`] !== undefined && e.field_id) {
      //   this.$set(e, 'val', this.obj[`a${e.field_id}`])
      //   this.obj[`a${e.field_id}Flag`] = false
      // }
      // if (!this.obj.a418Flag && !this.obj.a418) {
      //   this.obj.a418 = getToDayFunc()
      // }
      // if (!this.obj.a419Flag && !this.obj.a419) {
      //   this.obj.a419 = getToDayFunc()
      // }
      // if (!this.obj.a420Flag && !this.obj.a420) {
      //   this.obj.a420 = getToDayFunc()
      // }
    },
    submitFunc () {
      if (!this.flag) {
        this.flag = true
        this.getData()
        setTimeout(() => {
          this.flag = false
        }, 5000)
      }
    },
    //  选择申请人
    selectStaff (e) {
      this.truename = e.truename
      this.department = e.department_id
    },
    processAuto () {
    }
  }
}
</script>
